<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>注册页面 - 工商后台管理系统模板</title>
  <link rel="icon" th:href="@{/favicon.ico}" type="image/ico">
  <meta name="keywords" content="江西工商后台模板,后台管理系统,工商HTML模板">
  <meta name="description" content="jxgs是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
  <link th:href="@{/css/style.min.css}" rel="stylesheet">
  <!-- / START - page related stylesheets [optional] -->
  <link th:href="@{/assets/stylesheets/plugins/fuelux/wizard.css}" media="all" rel="stylesheet" type="text/css" />
  <!-- / END - page related stylesheets [optional] -->
  <!-- / bootstrap [required] -->
  <link th:href="@{/assets/stylesheets/bootstrap/bootstrap.css}" media="all" rel="stylesheet" type="text/css" />
  <!-- / theme file [required] -->
  <link th:href="@{/assets/stylesheets/light-theme.css}" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
  <style>
    .lyear-wrapper {
      position: relative;
    }
    .lyear-login {
      display: flex !important;
      min-height: 100vh;
      align-items: center !important;
      justify-content: center !important;
    }
    .lyear-login:after{
      content: '';
      min-height: inherit;
      font-size: 0;
    }
    .login-center {
      background: #fff;
      min-width: 29.25rem;
      padding: 2.14286em 3.57143em;
      border-radius: 3px;
      margin: 2.85714em;
    }
    .login-header {
      margin-bottom: 1.5rem !important;
    }
    .login-center .has-feedback.feedback-left .form-control {
      padding-left: 38px;
      padding-right: 12px;
    }
    .login-center .has-feedback.feedback-left .form-control-feedback {
      left: 0;
      right: auto;
      width: 38px;
      height: 38px;
      line-height: 38px;
      z-index: 4;
      color: #dcdcdc;
    }
    .login-center .has-feedback.feedback-left.row .form-control-feedback {
      left: 15px;
    }
  </style>
</head>

<body>
<div class="row lyear-wrapper" style="background-image: url(Student_Management_Platform/images/login-bg.jpg); background-size: cover;">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
         <img alt="light year admin" th:src="@{/images/logo-sidebar%20.png}">
      </div>
      <div class='box'>
        <div class='box-content box-padding' style="height: 350px">
          <div class='fuelux'>
            <div class='wizard'>
              <ul class='steps'>
                <li class='active' data-target='#step1'>
                  <span class='step'>1</span>
                </li>
                <li data-target='#step2'>
                  <span class='step'>2</span>
                </li>
                <li data-target='#step3'>
                  <span class='step'>3</span>
                </li>
                <li data-target='#step4'>
                  <span class='step'>4</span>
                </li>
              </ul>
              <div class='actions'>
                <button class='btn btn-xs btn-prev'>上一步
                </button>
                <button class='btn btn-xs btn-success btn-next' data-last='下一步'>
                  下一步
                </button>
              </div>
            </div>
            <div class='step-content'>
              <hr class='hr-normal'>
              <form class="form" style="margin-bottom: 0;" method="post" th:action="@{/user/enllor}" accept-charset="UTF-8" onsubmit="return checkForm()">
                <div class='step-pane active' id='step1'>
                  <div class='form-group'>
                    <div class='controls' align="center">

                      <input type="text" name="iname" placeholder="姓名" class="form-control"/>
                      <div style="height: 16px"><span id="hint"></span></div>

                      <input type="password" name="password" id="pass_value" onfocus="shoeTips('pass_hint','密码长度不能小于六')"
                             onkeyup="checkPass()"  placeholder="密码" class="form-control" />
                      <div style="height: 16px" id="pass_hint"></div>

                      <input type="password" name="" id="passpass_value" onfocus="shoeTips('passpass_hint','两次密码要一致')"
                             onkeyup="checkPassPass()"  placeholder="确认密码" class="form-control" />
                      <div style="height: 16px" id="passpass_hint"></div>

                    </div>
                  </div>
                </div>
                <div class='step-pane' id='step2'>
                  <div class='form-group'>
                    <div class='controls' align="center">
                      <input type="text" name="studentId" id="studentId"  placeholder="学号" class="form-control"/>
                      <div style="height: 16px"></div>
                      <input type="radio"  name="sex" value="男" checked="checked"/><span style="position: relative;bottom: 2px">男</span>&nbsp;&nbsp;
                      <input type="radio" name="sex" value="女" /><span style="position: relative;bottom: 2px">女</span>
                      <div style="height: 30px">生日</div>
                      <input type="date" name="birthday" placeholder="生日" class="form-control" />
                      <div style="height: 16px"></div>
                    </div>
                  </div>
                </div>
                <div class='step-pane' id='step3'>
                  <div class='form-group'>
                    <div class='controls' align="center">
                      <input type="text" name="idCard" placeholder="身份证" class="form-control" />
                      <div style="height: 16px"></div>
                      <input type="text" name="phone" placeholder="电话" id="phone_value" onkeyup="phone()" class="form-control" />
                      <div style="height: 16px"><span id="phone_hint"></span></div>
                      <div style="height: 16px"></div>
                    </div>
                  </div>
                </div>
                <div class='step-pane' id='step4'>
                  <div class='form-group'>
                    <div class='controls' align="center">
                      <input type="text" name="address" placeholder="地址" class="form-control" />
                      <div style="height: 16px"></div>
                      <input type="text" name="nativePlace" placeholder="籍贯" class="form-control" />
                      <div style="height: 16px"></div>
                      <input type="text" name="nation" placeholder="民族" class="form-control" />
                      <div style="height: 16px" id="warn"></div>
                      <input type="submit" value="注册" class="btn btn-block btn-primary" />
                    </div>
                  </div>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
      <div align="center">我已有账号！点击<a th:href="@{/templates/lyear_pages_login.html}"><font color="aqua">登录</font> </a></div>

      <hr>
      <footer class="col-sm-12 text-center">
        <p class="m-b-0">Copyright © 2023 <a href="http://www.jxgsxy.net">软件技术一班</a>. All right reserved</p>
      </footer>
    </div>
  </div>
</div>
<script type="text/javascript">
  /**
   * 校验密码
   */

  function checkPass() {
    var value = document.getElementById("pass_value").value;
    var hint = document.getElementById("pass_hint");
    var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}');

    if (!pwdRegex.test(value)) {
      hint.innerHTML = "（密码中必须包含字母、数字、特殊字符）或者长度小于8，请及时修改密码！";
      return false;
    } else {
      hint.innerHTML = null;
      return true;
    }
  }

  /***
   * 确认密码的校验
   */
  function checkPassPass() {
    var papavalue = document.getElementById("passpass_value").value;
    var value = document.getElementById("pass_value").value;
    var papahint = document.getElementById("passpass_hint");
    if (papavalue !== value) {
      papahint.innerHTML = "两次密码不一致";
      return false;
    } else {
      papahint.innerHTML = null;
      return true;
    }
  }


  function phone() {
    var phone = document.getElementById("phone_value").value;
    var hint = document.getElementById("phone_hint")
    var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (reg.test(phone)) {
      hint.innerHTML = null
      return true;
    } else {
      hint.innerHTML = "手机号格式错误"
      return false;
    }
  }

  function checkForm() {
    var warn = document.getElementById("warn")
    if(checkPass() && checkPassPass() &&  phone()){
      return true
    }else {
      warn.innerHTML = "有信息未填或者格式错误"
      return false
    }
  }
</script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript">;</script>
<script th:src="@{/assets/javascripts/jquery/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/assets/javascripts/plugins/fuelux/wizard.js}" type="text/javascript"></script>
</body>
</html>